<!doctype html>
<html>
<head>
<meta charset="utf-8">
  <title>链上善行公益-大数据可视化平台</title>
  <script src="../blockchain-kindness/front/js/jquery.js"></script>
  <link href="front/images/logo1.png" rel="shortcut icon" type="image/png">
  <link rel="stylesheet" href="../blockchain-kindness/front/css/comon0.css">
  <style>
    @keyframes scroll-up {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-20px);
      }
    }

    .list-item {
      position: absolute; /* 或 relative，取决于您的布局需求 */
      will-change: transform; /* 提高性能 */
    }

    .list-item-scrolling {
      animation: scroll-up 500ms ease forwards;
    }
    .info {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      width: 320px;
      padding: 12px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: start;
      background: #509AF8;
      border-radius: 8px;
      box-shadow: 0px 0px 5px -3px #111;
    }

    .info__icon {
      width: 20px;
      height: 20px;
      transform: translateY(-2px);
      margin-right: 8px;
    }

    .info__icon path {
      fill: #fff;
    }

    .info__title {
      font-weight: 500;
      font-size: 14px;
      color: #fff;
    }

    .info__close {
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin-left: auto;
    }

    .info__close path {
      fill: #fff;
    }
  </style>
</head>
	<script>
      // 数字滚动
	$(window).load(function(){
             $(".loading").fadeOut()
    })

/****/
$(document).ready(function(){
	var whei=$(window).width()
	$("html").css({fontSize:whei/20})
	$(window).resize(function(){
		var whei=$(window).width()
	 $("html").css({fontSize:whei/20})
});
	});
	</script>
	<script type="text/javascript" src="../blockchain-kindness/front/js/echarts.min.js"></script>
<body>
<div class="canvas" style="opacity: .2">
	<iframe frameborder="0" src="../blockchain-kindness/front/js/index.html" style="width: 100%; height: 100%"></iframe>
	</div>
<div class="loading">
  <div class="loadbox"> <img src="../blockchain-kindness/front/images/donations/loading.gif"> 页面加载中... </div>
</div>
<!--此处后续再做优化 具体优化为美化返回样式 + 链接返回处为上次-->
<div class="head">
  <h1><a href="#" style="color: white;pointer-events: none">爱心捐款数据分布图</a></h1>
  <div class="weather"><img src="../blockchain-kindness/front/images/donations/weather.png"><span>多云转小雨</span><span id="showTime"></span></div>

	<script>
      function createInfoDiv(text) {
        const infoDiv = document.createElement('div');
        infoDiv.className = 'info';
        const iconDiv = document.createElement('div');
        iconDiv.className = 'info__icon';
        const iconSvg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" height="24" fill="none">
      <path fill="#393a37" d="m12 1.5c-5.79844 0-10.5 4.70156-10.5 10.5 0 5.7984 4.70156 10.5 10.5 10.5 5.7984 0 10.5-4.7016 10.5-10.5 0-5.79844-4.7016-10.5-10.5-10.5zm.75 15.5625c0 .1031-.0844.1875-.1875.1875h-1.125c-.1031 0-.1875-.0844-.1875-.1875v-6.375c0-.1031.0844-.1875.1875-.1875h1.125c.1031 0 .1875.0844.1875.1875zm-.75-8.0625c-.2944-.00601-.5747-.12718-.7808-.3375-.206-.21032-.3215-.49305-.3215-.7875s.1155-.57718.3215-.7875c.2061-.21032.4864-.33149.7808-.3375.2944.00601.5747.12718.7808.3375.206.21032.3215.49305.3215.7875s-.1155.57718-.3215.7875c-.2061.21032-.4864.33149-.7808.3375z"></path>
    </svg>
  `;
        iconDiv.innerHTML = iconSvg;

        const titleDiv = document.createElement('div');
        titleDiv.className = 'info__title';
        titleDiv.textContent = text;

        infoDiv.appendChild(iconDiv);
        infoDiv.appendChild(titleDiv);

        return infoDiv;
      }
      var num;
      var t = null;
      var broad = [];
    t = setTimeout(time,1000);//開始运行
    function time()
    {
       clearTimeout(t);//清除定时器
       dt = new Date();
		var y=dt.getFullYear();
		var mt=dt.getMonth()+1;
		var day=dt.getDate();
       var h=dt.getHours();//获取时
       var m=dt.getMinutes();//获取分
       var s=dt.getSeconds();//获取秒
       document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"-"+h+"时"+m+"分"+s+"秒";
       t = setTimeout(time,1000); //设定定时器，循环运行
    }
    $.ajax({
      url : "/blockchain-kindness/donations/getAll",
      type : 'GET',
      success(resp){
        num = resp.data.amount;
        var elements = document.getElementsByClassName("pulll_left counter");
        for (var i = 0; i < elements.length; i++) {
          elements[i].innerHTML = num;
        }
      }
    })
      $.ajax({
        url:"/blockchain-kindness/disburse/getTotalDisburse",
        type : 'GET',
        success(resp){
          num = resp.data;
          var elements = document.getElementsByClassName("pulll_right counter");
          for (var i = 0; i < elements.length; i++) {
            elements[i].innerHTML = num;
          }
        },
        error(resp){
        }
      })

      $.ajax({
        url: "/blockchain-kindness/donations/getDonationsPage",
        type: 'GET',
        success: resp => {
          for (const data of resp.data) {
            const formattedString = `${data.username}于${data.createTime}捐献了${data.amount}元`;
            broad.push(formattedString);
          }
          // 将数据填充到列表
          populateList(broad);
        }
      })


      function populateList(data) {
        const listElement = document.querySelector('.list');
        listElement.innerHTML = ""; // 清空原有内容
        for (let i = 0; i < data.length; i++) {
          const liElement = document.createElement("li");
          liElement.className = "list-item" + (i + 1) + " list-item-scrolling"
          liElement.style.fontSize = "12px";
          liElement.style.display = "flex";
          liElement.style.color = '#FFF';
          liElement.style.justifyContent = "center";
          liElement.style.fontWeight = 'bold';
          liElement.style.fontStyle = 'italic'
          liElement.style.margin = "10px 0px 0px 0px"
          liElement.style.width = "100%"
          liElement.style.padding = "0px"

          // 创建 info div 并添加到 liElement 中
          const infoDiv = createInfoDiv(data[i]);
          liElement.appendChild(infoDiv);

          listElement.appendChild(liElement);
        }
      }
      // function formatTimestamp(timestamp) {
      //
      //   // 使用split分割字符串，提取日期和时间部分
      //   const [datePart, timePart] = timestamp.split('T');
      //
      //   // 移除日期部分的时区信息（'+00:00'），使用正则表达式匹配并替换
      //   const formattedDate = datePart.replace(/\+\d{2}:\d{2}/g, '');
      //
      //   // 移除时间部分的小数点和毫秒数，以及'T'前缀
      //   const formattedTime = timePart.replace(/\.\d+/g, '').replace('T', '');
      //
      //   // 将时间部分的小时数前的0移除
      //   const formattedHour = formattedTime.split(':')[0].replace(/^0/, '');
      //
      //   // 组合日期和格式化后的时间
      //   return `${formattedDate} ${formattedHour}:${formattedTime.split(':')[1]}:${formattedTime.split(':')[2]}`.replace(/\+00$/g, '');;
      // }

</script>


</div>
<div class="mainbox">
  <ul class="clearfix">
    <li>
      <div class="boxall" style="height: 3.2rem">
        <div class="alltitle">捐款金额区间</div>
        <div class="allnav" id="echart1"></div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: 3.2rem">
        <div class="alltitle">捐款用处</div>
        <div class="allnav" id="echart2"></div>
        <div class="boxfoot"></div>
      </div>

      <div class="boxall" style="height: 3.2rem">
        <div style="height:100%; width: 100%;">
		  	<div class="sy" id="fb1"></div>
				<div class="sy" id="fb2"></div>
				<div class="sy" id="fb3"></div>
		  </div>
        <div class="boxfoot">

		  </div>
      </div>
    </li>
    <li>
      <div class="bar">
        <div class="barbox">
          <ul class="clearfix">
            <!-- 这个地方后面调用接口 -->
            <li class="pulll_left counter" id="num"></li>
            <li class="pulll_right counter"></li>
          </ul>
        </div>
        <div class="barbox2">
          <ul class="clearfix">
            <li class="pulll_left">2024年总收赠情况 </li>
            <li class="pulll_left">2024年总支出情况</li>
          </ul>
        </div>
      </div>
      <div class="map">
        <div class="map1"><img src="../blockchain-kindness/front/images/donations/lbx.png"></div>
        <div class="map2"><img src="../blockchain-kindness/front/images/donations/jt.png"></div>
        <div class="map3"><img src="../blockchain-kindness/front/images/donations/map.png"></div>
        <div class="map4" id="map_1"></div>
      </div>
    </li>
    <li>
          <div class="boxall" style="height:3.4rem">
        <div class="alltitle">捐款时间统计图1</div>
        <div class="allnav" id="echart4"></div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: 3.2rem">
        <div class="alltitle">群众满意度</div>
        <div class="allnav" id="echart5"></div>
        <div class="boxfoot"></div>
      </div>
      <div class="boxall" style="height: 3rem;overflow: hidden">
        <div class="alltitle">用户捐款公示播报</div>
        <div class="allnav">
            <ul class="list" style="margin-top: 0px">

            </ul>
        </div>
      </div>
        <div class="boxfoot"></div>
    </li>
  </ul>
</div>
<div class="back"></div>

<!-- 此处可能存在隐式bug后续改错的时候需要进行注意 -->
<script type="text/javascript" src="../blockchain-kindness/front/js/china.js"></script>
<script type="text/javascript" src="../blockchain-kindness/front/js/area_echarts.js"></script>
<script language="JavaScript" src="../blockchain-kindness/front/js/js.js"></script>
<!-- 引入countUp插件 -->
<script>
  document.addEventListener('keydown', function(event) {
    if (event.key === 'c') { // 或者使用 'Esc'，两者等效
      event.preventDefault(); // 防止默认的 Esc 键行为（如关闭弹窗等）
      window.history.back(); // 触发页面回退

    }
  });
  // 对countUp的相关参数进行配置
  // document.addEventListener('DOMContentLoaded', function() {
  //   // 初始化CountUp实例
  //   var countUp = new CountUp('num', 0, 123456, 0, 2.5, {
  //     // 可选配置项
  //     useEasing: true, // 是否使用缓动效果
  //     easingFn: CountUp.easing.linear, // 缓动函数，默认是linear
  //     separator: ',', // 分隔符，比如千位分隔符
  //     decimal: '.', // 小数点符号
  //     decimalPlaces: 2, // 小数点后保留位数
  //   });
  //
  //   // 开始动画
  //   countUp.start()
  // });
</script>
<script>
  localStorage.setItem('url',window.location.href);
  const oul = document.querySelector('.list');
  let timeId;
  let isFirstRun = true;
  function rollup() {
    const oul = document.querySelector('.list');
    const elementChilds = Array.from(oul.children); // 获取所有子元素
    if (timeId) {
      clearInterval(timeId);
    }
    timeId = setInterval(() => {
      const firstElement = oul.firstElementChild;
      // 将第一个元素添加到最后一个元素的后面
      if(firstElement != null) {
        firstElement.classList.remove('list-item1')
        firstElement.classList.add('hiden')
        firstElement.className = 'hiden'
        console.log(firstElement)
        oul.appendChild(firstElement);
      }
      // 重置所有元素的状态
      elementChilds.forEach((element, index) => {
        console.log(23123213)
        element.classList.remove('list-item-scrolling', 'hiden','list-item-scrolling');
        element.style.transform = 'translateY(0)';
        element.className = `list-item${index + 1}`;
        console.log(element.className)
      });
    }, 1000);
  }
  rollup()
</script>

</body>
</html>